<template>
  <div class="box">
    <h2 class="title">AI数据运营平台</h2>
    <ServiceLoginAccountBox title="账号登录" @success="success" @failed="failed" />
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'

import ServiceLoginAccountBox from './components/serviceLoginAccountBox.vue'
import { message } from 'ant-design-vue'

import { loginAdminUser } from '@/api/user.api'
import type { LoginAdminUserDto } from '@/types/user.api'
import { setAuthHeader } from '@/api/http'

const router = useRouter()

const success = async (value: LoginAdminUserDto) => {
  const res = await loginAdminUser(value)
  if (res.code === 200 && res.data) {
    message.success('登录成功')
    // 先设置 Authorization 头与本地 token，再跳转首页
    setAuthHeader(res.data.token || null)
    localStorage.setItem('userId', res.data.id || '')
    localStorage.setItem('username', res.data.username || '')
    router.push({ name: 'workIndex' })
  } else {
    message.error(res.message || '用户名或密码错误')
  }
}
const failed = () => {
  console.log('failed')
}
</script>
<style lang="stylus" scoped>
.box {
  width: 100%;
  height: 100vh;
  display flex
  align-items center
  justify-content center
  background: url("@/assets/images/bg/loginBg.png") no-repeat;
  background-size: cover;
  position relative
  .title{
    font-size 28px
    position absolute
    left 60px
    top 60px
    font-weight 500
    color #1A1A1A
  }
}
</style>
